<template>
  <div id="FaultDispatch">
    <!--查询表单-->
    <el-form label-position="right" size="small" :inline="true" :model="queryForm" label-width='90px' class="query-form">
      <el-form-item label="装维员姓名">
        <el-input v-model="queryForm.xx" clearable placeholder="请输入装维员姓名"></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" size="small" @click="getData(1)">查询</el-button>
      <el-button type="primary" icon="el-icon-search" size="small" @click="clearQuery">清空</el-button>
      <el-button type="primary" icon="el-icon-circle-plus" size="small" @click="dialogAddVisible = true">工具回退</el-button>
          
      
    </el-form>

    <!--客户表格数据展示-->
    <el-table class="table" ref="table" :data="tableData" border style="width: 100%;"
        @sort-change="sortChange" v-loading="loading" :header-cell-style="{padding: 0,height: '34px'}"
      >
      <!-- <el-table-column prop="khxm" label="订单号" sortable="custom" :show-overflow-tooltip="true"></el-table-column> -->
      <el-table-column prop="xx" width="80px" sortable="custom" label="姓名"></el-table-column>
      <el-table-column prop="rqj" width="150px" sortable label="熔纤机"></el-table-column>
      <el-table-column prop="qgd" sortable="custom" label="切割刀"></el-table-column>
      <el-table-column prop="mlq" sortable="custom" label="米勒钳">
        
      </el-table-column>
      <el-table-column prop="pxkbq" sortable="custom" label="皮线开剥器" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="ggl" sortable="custom" label="光功率" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="hgb" sortable="custom" label="红光笔" width="90"></el-table-column>
      <el-table-column prop="lybqj" sortable="custom" label="蓝牙标签机" width="90">
        
      </el-table-column>
      <el-table-column prop="ghj" sortable="custom" label="固话机" width="160px" :show-overflow-tooltip="true">
        
      </el-table-column>
          <el-table-column prop="sst" sortable="custom" label="伸缩梯" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="gqds" sortable="custom" label="高清电视" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="gy" sortable="custom" label="工衣" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="aqyp" sortable="custom" label="安全用品" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="xds" sortable="custom" label="小电视" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="sszq" sortable="custom" label="所属镇区" :show-overflow-tooltip="true"></el-table-column>
     
    </el-table>

    <!--客户表格数据分页-->
    <el-pagination v-if="count" background layout="total,prev, pager, next"
                   :page-size="pageSize"
                   @current-change="getData"
                   :current-page="currentPage"
                   :total="count" style="float: right;">
    </el-pagination>

    <!--新增客户-->
     <el-dialog title="工具领取" width="900px" @open="openAdd" @close="closeAdd" class="dialog dialogAdd"
               :visible.sync="dialogAddVisible" :close-on-click-modal='false'>
      <el-form ref="addForm" style="margin-right: 20px;" :inline="true" :model="addForm" :rules="addFormRules" label-position="right" label-width="100px" size="small">
    
      
    <el-form-item label="姓名" prop="xx">
          <el-input v-model="addForm.xx"></el-input>
        </el-form-item>
    
            <el-form-item label="所属镇区" prop="sszq">
                    <el-select v-model="addForm.sszq" clearable placeholder="请选择">
                      <el-option v-for="item in zqList" :key="item" :value="item" :label="item"></el-option>
                    </el-select>
                </el-form-item> 
    <el-form-item label="手机号码" prop="sjhm">
          <el-input v-model="addForm.sjhm"></el-input>
        </el-form-item>
     <el-form-item label="领取时间" prop="lqsj">
       <el-date-picker v-model="addForm.lqsj" value-format="yyyy-MM-dd " format="yyyy-MM-dd "
            type="date" placeholder="请选择领取时间">
          </el-date-picker>
        </el-form-item> 
    
    <el-form-item label="工具选取" prop="checkedCities">
       <template>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
   <div style="margin: 15px 0;"></div> 
   
  <el-checkbox-group v-model="addForm.checkedCities" class="el">
    <el-checkbox v-for="city in cities" :label="city" :key="city" class="checkbox">{{city}}</el-checkbox>
  </el-checkbox-group>

</template>
            
  </el-form-item>

  
       
        
        <el-form-item label="备注" prop=" ">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" placeholder="请输入备注" resize="none" v-model="addForm.bz">
          </el-input>
        </el-form-item>
     
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">录入</el-button>
      </div>
    </el-dialog> 
    
  </div>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import Viewer from "v-viewer/src/component.vue"
const cityOptions=['工衣','熔纤机', '切割刀', '米勒钳','光功率','红光笔','伸缩梯','小电视','安全用品','高清电视','皮线开剥器','蓝牙标签机','固话机']




export default {
  name: 'Azd',
  components: {
    Viewer
  },
  data () {
    return {
      
      checkAll:false,
      
      isIndeterminate: true,
      cities:cityOptions,

      qyList:["光猫","分光器","机顶盒","光纤","尾纤"],//材料设备
     zqList:["虎门","厚街","北区","资源政治部","工程部"],//所属镇区
      queryForm: {},    //  查询条件
      prop: 'createTime', //  排序属性
      order: -1,    //  排序 升序、降序
      bzfsList: ['客户拨打本地热线3530000','客户拨打渠道服务电话','客户微信报障','客户拨打装维人员电话'],    // 报障方式
      gzlxList: ['LOS红灯','ONU不通电，确认已开电源','PON灯闪','经常掉线','其他','上网慢','网络不稳定经常断线，网速时快时慢','网络电视，机顶盒不懂操作',
        '网络电视，无法播放','网络电视，无法点播','网络电视，无法直播', '网络电视，遥控器问题', '续费后无法上网', '指示灯正常，但无法上网'],  //  故障类型
      tableData: [],    //  当前页数据
      loading: false,
      count: '',      //  总数据条数
      currentPage: 1,//默认开始页面
      pageSize: 20,//每页的数据条数
    /************************新增安装单********************* */
      addForm: {
        xx: '',                //姓名
        sszq: '',               //所属镇区
        sjhm: '',              //手机号码
        lqsj: '',               //领取时间
        checkedCities: [],      //工具选取
        bz: '',                //备注
      
      },                //  新增表单
      addFormRules:{
          xx: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          sszq: [{ required: true, validator: this.isNull, trigger: 'change' }],
          sjhm: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          //lqsj: [{ required: true, validator: this.isNull, trigger: 'change' }],
          checkedCities: [{ required: true, validator: this.isArrayNull, trigger: 'change' }]
      },//新增校验规则
      dialogAddVisible: false,    //  新增模态框
      options: [],
    /************************安装单催办********************* */
      // urgentData: {},     //  当前催办单
      // remark: '',           //  催办备注
      // dialogUrgentVisible: false,    //  模态框
    /************************催办历史********************* */
      // cbList: {},     //  催办历史
      // cbListShow: false,  //  获取催办历史后显示
      // dialogUrgentHistoryVisible: false,    //  催办历史模态框
      // cbLoading: true,
      // images: [], //  图片信息
       /************************回退材料********************* */
       //  htcldialogAddVisible: false,   //  新增模态框
       /************************回退材料********************* */
      //  shcldialogAddVisible: false,   //  新增模态框
    }
  },
  mounted(){
    this.getData(1)
   
  },

  methods: {
    getData(val){
      let params = {}
      let queryForm = this.deepClone(this.queryForm)
      params.currentPage = val
      params.pageSize = this.pageSize
      params.queryForm = queryForm
      params.prop = this.prop
      params.order = this.order
      this.startLoading()
      this.$post("/api/GjController/getlist2",params, (data) => {
        this.tableData = data.list;
        this.count = data.count;
        this.loading = false
      })
    },
    // 排序
    sortChange(obj){
      this.prop = obj.prop || "createTime"
      this.order = obj.order == 'ascending' ? 1 : -1
      this.getData(1)
    },
    clearQuery(){
        this.queryForm = {}
        this.getData(1)
    },
  /***********************导出******************* */
    formatJson(filterVal, jsonData) {
　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　},
    
  /******************新增***************** */
    
    // 打开新增模态框
    openAdd(){
      this.addForm.pdsj = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
    },
    // 关闭新增模态框
    closeAdd(){
      this.$refs.addForm.resetFields()
    },
    // 确定新增
    add(){
     
     
     
     this.$refs.addForm.validate((valid) => {
     
     
     if (valid) {
          let addForm = this.deepClone(this.addForm)
          console.log(addForm)
          // if(addForm.gswg && addForm.gswg.length){
          //   addForm.qy = addForm.gswg[0]
          //   addForm.gswg = addForm.gswg[1]
          // }else{
          //   addForm.qy = ''
          //   addForm.gswg = ''
          // }
          // if(addForm.zwsfId){
          //   addForm.zwsfCname = addForm.zwsfId.split('/')[1]
          //   addForm.zwsfId = addForm.zwsfId.split('/')[0]
          // }
          
          this.startLoading()
          this.$post("/anapp/GjController/addOne2", addForm, (data) => {
            this.$message.success("添加成功！")
            this.dialogAddVisible = false
            this.getData(1)
          })
        }
      })
    }
    ,
     handleCheckAllChange(val) {
       alert(val)
     
        this.addForm.checkedCities = val ? cityOptions : [];
        
        this.isIndeterminate = false;
      }

   /*****************回退材料***************/
  // 打开新增模态框
   // openAddhtcl(){
     /* this.addForm.pdsj = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')*/
   // },
    // 关闭新增模态框
   // closeAddhtcl(){
   //   this.$refs.addForm.resetFields()
    //},
  /*****************损坏材料***************/
 //openAddshcl(){
     /* this.addForm.pdsj = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')*/
    },
    // 关闭新增模态框
    closeAddshcl(){
      this.$refs.addForm.resetFields()
    },

  /******************催办***************** */
    //  点击催办按钮
    // urgent(item){
    //   console.log(item)
    //   this.urgentData = item
    //   this.dialogUrgentVisible = true
    //   this.remark=''
    // },
    // 确定新增催办
    // addCd(){
    //   this.startLoading()
    //   this.$post("/api/AzdOperateLogController/addOne", {parentId: this.urgentData.id,operateType: '催办', remark: this.remark}, (data) => {
    //     this.$message.success("催办成功！")
    //     this.dialogUrgentVisible = false
    //     this.urgentData.cbcs = this.urgentData.cbcs ? this.urgentData.cbcs + 1 : 1
    //   })
    // },
    
  /******************催办历史***************** */
    //  获取催办历史
    // getCbList(id){
    //   this.cbList = []
    //   this.dialogUrgentHistoryVisible = true
    //   this.cbLoading = true
    //   this.$post("/api/AzdOperateLogController/getList", {id: id}, (data) => {
    //     this.cbList = data.list
    //     this.cbLoading = false
    //   })
    // },
    //  查看图片
//     inited (viewer) {
//       this.$viewer = viewer
//     },
//     show (list) {
//       let images = []
//       list.map(item => {
//         images.push(this.config.httpHeadUrl + item)
//       })
//       this.images = images
//       setTimeout(() => {
//           this.$viewer.show()
//       }, 0)
//     }
  
 //  }
 }
</script>

<style lang="less" scoped>
  .dialogAdd {
    .el-input, .el-cascader, .el-select, .el-textarea {
      width: 300px;
    }
  }

  .label-box{
    display: flex;
    margin-bottom: 5px;
    .label-text{
      width: 100px;
      text-align: right;
      padding-right: 10px;
    }
    .label-value{
      flex: 1;
    }
  }
</style>
<style lang="less">
    .long-form .el-form-item__label{
      line-height: 16px;
    }
    .el{
width: 335px;

margin: 0px ;
padding: 0px;
}
.el .checkbox {
width: 335px;
height:42px;
line-height:42px;
border:1px ;
  margin: 0px ;
padding: 0px;
}
.checkbox:hover{
 background: 	#F8F8F8 !important;
}
</style>

